<template>
    <q-layout view="hHh lpR fFf">

        <q-header elevated class="bg-primary text-white">
            <q-toolbar>
                <q-btn dense flat round icon="menu" @click="toggleLeftDrawer" />
                后台管理系统
            </q-toolbar>
        </q-header>

        <q-drawer show-if-above v-model="leftDrawerOpen" side="left" bordered>
            <q-list>
                <q-item clickable v-ripple :to="{ name: 'adminIndex' }">
                    <q-item-section>
                        <q-item-label>首页</q-item-label>
                    </q-item-section>
                </q-item>
                <q-item clickable v-ripple :to="{ name: 'adminBlogs' }">
                    <q-item-section>
                        <q-item-label>文章审核</q-item-label>
                    </q-item-section>
                </q-item>
                <q-item clickable v-ripple :to="{ name: 'adminComments' }">
                    <q-item-section>
                        <q-item-label>评论审核</q-item-label>
                    </q-item-section>
                </q-item>

            </q-list>
        </q-drawer>

        <q-page-container>
            <router-view />
        </q-page-container>

    </q-layout>
</template>

<script>
import { ref } from 'vue'

export default {
    setup() {
        const leftDrawerOpen = ref(false)

        return {
            leftDrawerOpen,
            toggleLeftDrawer() {
                leftDrawerOpen.value = !leftDrawerOpen.value
            }
        }
    }
}
</script>
